<template>
  <div ref="lineChart2" style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" :id="lineChart2Data.id" class="_wz_char">

  </div>
</template>
<script>
  export default {
    props: ["lineChart2Data", "bottomHeight"],//接收来自父组件的数据
    data() {
      return {}
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      var data = that.lineChart2Data.data;

      var chart = new G2.Chart({
        container: that.lineChart2Data.id,
        forceFit: true,
        height: that.bottomHeight,
        padding: !!that.lineChart2Data.style.padding ? that.lineChart2Data.style.padding : 'auto',
        data: data
      });

      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      chart.axis('temperature', {
        label: {
          formatter: function formatter(val) {
            return val;
          }
        }
      });
      chart.line().position('month*temperature').color('city');
      chart.point().position('month*temperature').color('city').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      });
      chart.render();
    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
